<template>
  <div class="internetChannelSkillWrap">
    <configCompositionTwoWindowStyle :height="170">
      <template slot="card">
        <div v-loading="tableLoading">
          <search
            :inputTitle="$t('callServiceSkillGroup.callServiceSkillGroup2')"
            :isReloadIvr="false"
            :showAdvSearch="false"
            @add="addSkillGroup"
            @refresh="refresh"
            @search="searchByName"
            @inputChange="inputChangeSkillName"
            @turnPage="turnPage"
            :currentPage="currentPage"
            :count="count"
            :pageSize="10">
          </search>
          <diyTable :tableHeader="tableHeader" :tableData="tableData" @updata="updata" @del="del"></diyTable>
        </div>
      </template>
      <template slot="detail">
        <breadCrumb v-if="isShowAddOrEdit" :titleArr="titleArr" @back="back"></breadCrumb>
        <div v-if="isShowAddOrEdit" v-loading="isLoadingAddOrEdit">
          <addBusinessSkillGroup :skillInfo="skillInfo" @refresh="refresh"></addBusinessSkillGroup>
        </div>
      </template>
    </configCompositionTwoWindowStyle>
  </div>
</template>
<script>
  import configCompositionTwoWindowStyle from '../../../../../ui-modules/config/configCompositionTwoWindowStyle'
  import search from '../../base/search'
  import breadCrumb from '../../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import diyTable from '../../base/diyTable'
  import addBusinessSkillGroup from './addBusinessSkillGroup'
  export default {
    data () {
      return {
        count: 0,
        agents: [],
        currentPage: 1,    //   当前页
        tableHeader: [
          {prop: 'DisplayName', label: this.$t("callServiceSkillGroup.callServiceSkillGroup3")},
          {prop: 'UpdateTime', label: this.$t("config.channel.lastUpdateTime")},
          {prop: 'UpdateAgent', label: this.$t("callServiceSkillGroup.callServiceSkillGroup4")},
          {prop: '', label: this.$t("public.operate")}
        ],                        //   自定义 表头
        tableData: [],           //  表格数据
        tableLoading: false,      //   表格  loading
        isShowAddOrEdit: false,   //   右侧  新建或修改 显隐
        isLoadingAddOrEdit: false,
        titleArr: [this.$t('configLazyLoad.agentConfig.businessGroup'), this.$t('callServiceSkillGroup.callServiceSkillGroup5')],
        inputConditionSkillName: '',
        skillInfo: {}
      }
    },
    components: {
      configCompositionTwoWindowStyle,
      search,
      breadCrumb,
      diyTable,
      addBusinessSkillGroup
    },
    methods: {
      back () {
        this.isShowAddOrEdit = false
      },
      addSkillGroup () {
        this.isShowAddOrEdit = true
        this.titleArr.splice(1, 1, this.$t('callServiceSkillGroup.callServiceSkillGroup5'))
        this.skillInfo = {}
      },
      refresh () {
        this.currentPage = 1
        this.inputConditionSkillName = ''
        this.search()
      },
      searchByName (val) {
        this.inputConditionSkillName = val
        this.currentPage = 1
        this.search()
      },
      inputChangeSkillName (val) {
        this.inputConditionSkillName = val
      },
      search () {
        this.tableLoading = true
        this.$store.dispatch('queryBusinessQueue', {page: this.currentPage, limit: 10, DisplayName: this.inputConditionSkillName, Type: 'business'}).then((res) => {
          this.tableLoading = false
          if (res.success) {
            this.tableData = res.list
            this.count = res.count
            this.isShowAddOrEdit = false
          }
        })
      },
      turnPage (val) {
        this.currentPage = val
        this.search()
      },
      updata (val) {
        let id = val._id
        this.isLoadingAddOrEdit = true
        this.$store.dispatch('queryBusinessQueueById', {_id: id}).then(res => {
          if (res && res.success) {
            this.isLoadingAddOrEdit = false
            this.isShowAddOrEdit = true
            this.titleArr.splice(1, 1, this.$t('callServiceSkillGroup.callServiceSkillGroup6'))
            this.skillInfo = res.data
          }
        })
      },
      del (val) {
        let data = {}
        data._id = val._id
        this.$confirm(this.$t('configLazyLoad.skillGroup.tips4'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteBusinessQueue', data).then(res => {
            if (res.success) {
              this.refresh()
              this.$message({
                message: this.$t('callServiceSkillGroup.callServiceSkillGroup73'),
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      }
    },
    beforeMount () {
      this.search()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .internetChannelSkillWrap
    .title
      color $c-prompt
      height 30px
      line-height 30px
      padding 3px 10px
      border-bottom 1px solid $c-border1
</style>
